<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app">
      <h2>{{title}}</h2>
      <ul>
        <li v-for="item in msg">
          {{item.title}}
          -
          卖出：{{item.sales}}
          <button @click="item.sales++" v-if="item.stock - item.sales > 0">+</button>
          -
          剩余：{{item.stock - item.sales}}
          <span v-if="item.stock - item.sales <= 0">卖光了</span>
        </li>
      </ul>
      <p>{{sum}}</p>
    </div>
    {{title}}
	</body>
  <script src="../vue.js"></script>
  <script>
    console.log(Vue)
    const vm = new Vue({
      el:"#app",
      data:{
        title:"hello VUE",
        msg:[{
          id:0,
          title:"手机",
          sales:8,
          stock:17
        },{
          id:1,
          title:"电脑",
          sales:4,
          stock:12
        },{
          id:2,
          title:"冰箱",
          sales:2,
          stock:9
        }]
      },
      computed:{
        sum(){
          return this.msg.reduce((prev, now)=>{
            return prev + now.sales
          },0)
        }
      }
    });
  </script>
</html>
